<script src="../../api/access_api.js"></script>
<template>
    <div class="childrenBox cb-1">
        <div class="textA">
            <p>总销售额</p>
            <a class="el-icon-setting"></a>
        </div>


        <div class="textB">
            <p>￥{{totalSales}}</p>
        </div>


        <div class="textC">
            <div class="text-left"><p>周同比</p>
                <div class="t-1"></div>
                <p>{{(weekly).toFixed(2)}}%</p></div>
            <div class="text-right"><p>日环比</p>
                <div class="t-2"></div>
                <p>{{(day_on_month).toFixed(2)}}%</p></div>
        </div>
        <div class="textD">
            <p>日均销售额 ￥ {{(totalSales/7).toFixed(0)}}</p>
        </div>
    </div>
</template>

<script>

    import {getSalesData} from "../../api/sales_api"

    export default {
        name: "index",
        data() {
            return {
                /*总销售额*/
                totalSales: 0,
                salesList: [],
                weekly: 0,
                day_on_month: 0
            }
        },
        created() {
        },

        methods: {

            // 调用sales.json数据的接口
            getSalesData() {
                getSalesData().then(res => {
                    let data = res.data;
                    let data2 = data.data;
                    /*计算总销售额*/
                    for (let i = 0; i < data2.length; i++) {
                        this.totalSales += data2[i].product_price
                    }


                    // 周同比增长率=(本周销售总额-上周销售总额)÷上周销售总额×100%。
                    /*计算周同比*/

                    let LastWeekSales = 0//上周销售总额
                    let thisWeekSales = 0//本周销售总额
                    let yesterdaySales = 0//昨天销售额
                    let todaySales = 0// 今天销售额

                    for (let i = 0; i < data2.length; i++) {
                        if (data2[i].sales_date === "2021-09-13") {
                            LastWeekSales += data2[i].product_price
                        } else if (data2[i].sales_date === "2021-09-20") {
                            thisWeekSales += data2[i].product_price
                        }
                        //日环比
                        if (data2[i].sales_date === "2021-09-13"){
                            yesterdaySales += data2[i].product_price
                        } else if (data2[i].sales_date === "2021-09-14") {
                            todaySales += data2[i].product_price
                        }
                            }
                    this.day_on_month = (yesterdaySales - todaySales) / yesterdaySales * 100
                    this.weekly = (thisWeekSales - LastWeekSales) / LastWeekSales * 100

                    // console.log("销售记录表::", data2)
                }).catch(err => {
                    // console.error("销售表记录：：", err)
                })
            }
        },

        mounted() {
            // this.getSalesList()
            this.getSalesData()
        }

    }
</script>

<style scoped>
    p {
        padding: 0;
        margin: 0;
    }

    .childrenBox {
        flex: 1;
        background: #fff;
        height: 220px;
        width: 300px;
        margin: 25px;
    }

    .textA {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        color: #8c8c8c;
    }

    .textA a {
        margin-top: 4px;
    }

    .textB {
        width: 100px;
        font-size: 35px;
        margin-left: 15px;
    }

    .textC {
        display: flex;
        justify-content: space-between;
        height: 60px;
        width: 300px;
        margin: 15px;
        border-bottom: 1px solid #b8ceef;
    }

    .text-left {
        display: flex;
        align-items: center;
    }

    .text-right {
        display: flex;
        align-items: center;
    }

    .text-left .t-1 {
        border: 1px solid #42b983;
        width: 5px;
        height: 5px;
        margin: 10px;
    }

    .text-right .t-2 {
        border: 1px solid #e97a7a;
        width: 5px;
        height: 5px;
        margin: 10px;
    }

    .textD p {
        display: flex;
        margin-left: 15px;
    }
</style>
